import { Drawer, Button } from '@alifd/next';
import { t } from '@lingui/macro';
import { observer } from 'mobx-react-lite';
import React, { } from 'react';
import Vehicle from '../../Vehicle';
import Driver from '../../Driver';
import CcOrder from '../../../order/CcOrder';
import ScOrder from '../../../order/ScOrder';
import DrawerFooter from '@/components/DrawerFooter';

function ComponentsDrawer({ modal, companyId, onCancel }) {
  const TYPE = {
    vehicle: <Vehicle companyId={companyId} />,
    ccOrder: <CcOrder companyId={companyId} />,
    scOrder: <ScOrder companyId={companyId} />,
    driver: <Driver companyId={companyId} />,
  };

  const TITLE = {
    vehicle: t`查看【${companyId}】车辆`,
    ccOrder: t`查看【${companyId}】包车订单`,
    scOrder: t`查看【${companyId}】专线订单`,
    driver: t`查看【${companyId}】司机`,
  };

  /**
   * 关闭modal
   */
  const handleCancel = () => {
    onCancel();
  };

  return (
    <>
      <Drawer
        visible={modal[0] === 'vehicle' || modal[0] === 'ccOrder' || modal[0] === 'scOrder' || modal[0] === 'driver'}
        title={TITLE[modal[0]]}
        style={{ maxWidth: '90%' }}
        closeMode={['esc', 'mask', 'close']}
        onClose={() => handleCancel()}
        width="90%"
      >
        {TYPE[modal[0]]}
        <DrawerFooter>
          <Button style={{ marginLeft: 8 }} onClick={handleCancel}>{t`取消`}</Button>
        </DrawerFooter>
      </Drawer>
    </>
  );
}

export default observer(ComponentsDrawer);
